<template>
  <el-dialog
      v-model="visible"
      :title="dialogTitle"
      width="640px"
      destroy-on-close
      class="dialog"
      @closed="handleClosed"
  >
    <el-form
        :model="formData"
        label-width="120px"
        ref="formRef"
        class="form"
        :rules="rules"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="用户名" prop="userCode" required>
            <el-input v-model="formData.userCode" placeholder="请输入用户名" :readonly="!!formData.userId"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="昵称" prop="nickName" required>
            <el-input v-model="formData.nickName" placeholder="请输入昵称"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="角色" prop="roleCode" required>
            <TableDictSelect
                v-model="formData.roleCode"
                table-name="app_role"
                label-field="roleName"
                value-field="roleCode"
            />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {UserItem} from "@/views/user/user"
import TableDictSelect from "@/components/TableDictSelect.vue";

const visible = ref(false)
const dialogTitle = ref('')
const emit = defineEmits(['submit'])
const formRef = ref<FormInstance>()

const formData = ref<UserItem>({
  userId: null,
  orgCode: "",
  userCode: "",
  roleCode: "",
  nickName: ""
})

const rules: FormRules = {
  userCode: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 2, max: 50, message: '长度在2到50之间', trigger: 'blur'}
  ],
  nickName: [
    {required: true, message: '请输入昵称', trigger: 'blur'},
    {min: 2, max: 50, message: '长度在2到50之间', trigger: 'blur'}
  ]
}

const openDialog = (orgCode: string, rowData?: UserItem) => {
  if (rowData && rowData.userId) {
    dialogTitle.value = '修改用户'
    formData.value = {...rowData}
    formData.value.orgCode = orgCode
  } else {
    dialogTitle.value = '新增用户'
    formData.value = {
      userId: null,
      orgCode: orgCode,
      userCode: "",
      roleCode: "",
      nickName: ""
    }
  }
  visible.value = true
}

const submitForm = async () => {
  if (!formRef.value) return
  try {
    await formRef.value.validate()
    emit('submit', formData.value)
    visible.value = false
  } catch (error) {
    console.log('Form validation failed')
  }
}

const handleClosed = () => {
  formRef.value?.clearValidate()
}

defineExpose({openDialog})
</script>

<style scoped>
.dialog {
  border-radius: 12px;
}

.form {
  padding: 10px 10px 0 0;
}

.dialog-footer {
  text-align: right;
  padding-top: 10px;
}
</style>